<template>
	<view class="loading_box" v-show="is_loading" @click="switch_loading">
		<view class="loading flex align-center justify-center">
			<view>
				<image
				    class="loadImg"
					:src="src"
					mode="widthFix"
				></image>
				<text>{{ title ? title : '加载中' }}</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			src:''
		};
	},
	props: ['title'],
	methods: {
		switch_loading() {
			// this.$store.commit("switch_loading")
		}
	},
	computed: {
		is_loading() {
			return this.$store.state.loading;
		}
	}
};
</script>
<style lang="scss" scoped>
.loading_box {
	.loading {
		position: fixed;
		background: rgba($color: #000000, $alpha: 0);
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: 999;

		view {
			text-align: center;
			width: 160rpx;
			height: 160rpx;
			border-radius: 20rpx;
			background-color: rgba(0, 0, 0, 0.3);
			padding-top: 22rpx;
			box-sizing: border-box;
			position: relative;
			top: -80rpx;
			text {
				font-size: 24rpx;
				animation: mymove 3s infinite;
				color: #fff;
			}
			.loadImg {
				width: 80rpx;
				height: 80rpx;
				display: block;
				z-index: 99999;
				margin: 0 auto;
			}
		}
	}
}
@keyframes mymove {
	0% {
		opacity: 1;
	}

	50% {
		opacity: 0.8;
	}

	100% {
		opacity: 1;
	}
}
</style>
